<template>
  <div class="box">
    <header class="header">
      <ul>
        <li class="left">
          <van-icon name="arrow-left" @click="$router.back()" />
        </li>
        <li class="middle">
          <van-cell-group>
            <van-field
              v-model="value"
              placeholder="请输入关键字"
              left-icon="search"
            />
          </van-cell-group>
        </li>
        <li class="right">
          <van-button type="danger" @click="getGoodsList(value)"
            >搜索</van-button
          >
        </li>
      </ul>
    </header>
    <!-- 内容部分 -->
    <div class="content">
      <div class="list">
        <h3>
          最近搜索
          <span class="delete" @click="clearHistory">
            <van-icon name="delete-o" />
          </span>
        </h3>
        <van-tag
          plain
          type="default"
          v-for="(item, index) in searchList"
          :key="index"
          @click="getGoodsList(item)"
        >
          {{ item }}
        </van-tag>
      </div>
      <div class="list">
        <h3>热门搜索</h3>
        <van-tag
          plain
          type="default"
          v-for="item in hotSerch"
          :key="item.wordid"
          @click="getGoodsList(item.keyword)"
        >
          {{ item.keyword }}
        </van-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SerchPage",
  data() {
    return {
      value: "",
      hotSerch: [],
      searchList: [],
    };
  },
  created() {
    this.searchList = JSON.parse(sessionStorage.getItem("searchList"));
    this.$http({
      url: "pro/hotword",
    }).then((res) => {
      this.hotSerch = res.data.data.filter((item) => item.keyword);
    });
  },
  methods: {
    clearHistory() {
      this.searchList = "";
      sessionStorage.removeItem("searchList");
    },
    getGoodsList(keyword) {
      if (!keyword) return;
      this.$router.push("/searchResult?keyword=" + keyword);
      if (sessionStorage.getItem("searchList")) {
        let arr = JSON.parse(sessionStorage.getItem("searchList"));
        let index = arr.indexOf(keyword);

        if (index != -1) {
          arr.splice(index, 1);
        }
        arr.unshift(keyword);

        sessionStorage.setItem("searchList", JSON.stringify(arr));
      } else {
        sessionStorage.setItem("searchList", JSON.stringify([keyword]));
      }
    },
  },
};
</script>

<style scoped>
.header ul {
  display: flex;
  align-items: center;
  text-align: center;
  height: 44px;
}
.header ul .left {
  width: 40px;
  font-size: 24px;
}
.header ul .left i {
  display: block;
}
.header ul .middle {
  flex: 1;
}
.header ul .middle .van-cell {
  background-color: #efefef;
  border-radius: 16px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header ul .right {
  width: 60px;
  font-size: 12px;
}
.header ul .van-button {
  padding: 0 4px;
  height: 24px;
}
.header ul .right .van-button__content {
  font-size: 12px;
}
/* 内容区域 */
.content .list {
  padding: 15px;
}
.content .list h3 {
  font-size: 14px;
}
.content .list .van-tag {
  padding: 5px 10px;
  margin: 3px;
  font-size: 12px;
  clear: #969799;
}
</style>